<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- 头部 -->
      <el-button type="primary" @click="isShowPage = true">添加页面</el-button>
      <div class="siftCss">
        <el-input
          v-model="title_contains"
          style="float: left; width: 300px"
          placeholder="请输入标题关键字"
        ></el-input>
        <el-button style="float: right" type="primary" @click="siftPage"
          >搜索</el-button
        >
        <el-button type="warning" @click="resetFn" class="resetBtn">
          重置搜索</el-button
        >
      </div>
    </div>
    <!-- 内容 -->
    <div class="text item">
      <el-table
        height="600px"
        :data="pageDataList[change]"
        border
        style="width: 100%"
      >
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="content" label="内容">
          <template #default="{ row }">
            <p v-html="row.content"></p>
          </template>
        </el-table-column>
        <el-table-column width="180" prop="address">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="updatePage(row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="delPage(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->

    <el-pagination
      align="center"
      layout="total,prev, pager, next"
      :total="num.length"
      :page-size="pageSize"
      @current-change="currentChange"
    >
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog
      :title="`${pageData.id ? '编辑' : '新增'}页面`"
      :visible.sync="isShowPage"
      width="50%"
      @close="btnCancel"
    >
      <el-form ref="addForm" :model="pageData" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="pageData.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <VueEditor class="Editor" v-model="pageData.content"></VueEditor>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-button @click="btnCancel" class="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK" class="btnOk"
            >确 定</el-button
          >
        </el-row>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getPage,
  delPage,
  getPageById,
  addPage,
  updatePage,
  getLimit,
} from "@/api/page.js";
// 引入富文本编辑器  Vue2Editor
import { VueEditor } from "vue2-editor";
import { dimensionOneToTwo } from "@/share";
export default {
  data() {
    return {
      //页面显示的条数
      pageSize: 10,
      // 页面列表数据
      pageDataList: [],
      // 控制弹窗
      isShowPage: false,
      // 添加编辑页面的对象数据
      pageData: {
        title: "",
        content: "",
      },
      // 页面 id
      pageID: "",
      // 筛选功能变量
      title_contains: "",
      // 实现分页组件功能对象
      pageSetting: {
        _limit: 10,
        _start: 0,
      },
      total: 0,
      num: 0,
      change: 0,
      // 表单验证
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getPageList();
  },

  methods: {
    // 封装获取页面列表函数
    async getPageList() {
      // 获取页面总数的数字
      this.total = await getLimit();
      this.pageSetting._limit = this.total;
      this.num = await getPage(this.pageSetting);
      this.pageDataList = dimensionOneToTwo(this.num, this.pageSize);
    },

    //  删除按钮处理函数
    async delPage(id) {
      try {
        await this.$confirm("您确定删除吗");
        await delPage(id);
        this.$message.success("删除成功");
        this.getPageList();
      } catch (error) {
        console.dir(error);
      }
    },

    // 编辑按钮处理函数
    async updatePage(id) {
      this.isShowPage = true;
      this.pageID = id;
      this.pageData = await getPageById(id);
    },

    // 弹窗取消按钮处理函数
    btnCancel() {
      // 清空表单
      this.pageData = {
        title: "",
        content: "",
      };
      this.$refs.addForm.resetFields();
      // 关闭弹窗
      this.isShowPage = false;
    },

    // 弹窗确定按钮处理函数
    async btnOK() {
      // 校验表单  用elementUI 的 form表单中的 validate方法
      await this.$refs.addForm.validate();
      // 发送添加或编辑请求   根据有没有 id 进行判断
      if (this.pageID) {
        await updatePage({
          ...this.pageID,
          ...this.pageData,
          created_at: new Date(),
          updated_at: new Date(),
        });
      } else {
        await addPage(this.pageData);
      }
      // 提示用户
      this.$message.success("操作成功");
      // 重新加载页面
      this.getPageList();
      // 关闭弹窗
      this.isShowPage = false;
    },
    // 重置搜索
    resetFn() {
      this.title_contains = "";
      this.getPageList();
    },
    // 搜索按钮处理函数
    async siftPage() {
      if (!this.title_contains) {
        this.$message.warning("没有搜索的数据");
        return;
      }
      this.num = await getPage({
        ...this.pageSetting,
        title_contains: this.title_contains,
      });
      this.pageDataList = dimensionOneToTwo(this.num, this.pageSize);
    },

    // 分页功能
    currentChange(newPage) {
      this.change = newPage - 1;
      // 然后重新加载页面列表即可
      this.getPageList();
    },
  },
  watch: {
    title_contains(newVal) {
      if (!newVal) this.getPageList();
    },
  },
  components: { VueEditor },
};
</script>

<style lang="less" scoped>
.siftCss {
  display: flex;
  .el-button {
    margin-left: 10px;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

// 富文本编辑器样式
.Editor {
  margin-top: 20px;
  padding-top: 20px;
}

.clearfix {
  .siftCss {
    float: right;
    width: 370px;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
img {
  width: 120px !important;
}
.siftCss .el-button .el-button--warning {
  margin-left: 20px;
}

/deep/.el-dialog__header {
  background-color: #66ccff;
  .el-dialog__title {
    color: #fff;
  }
}

.btnCancel {
  margin-right: 50px;
}
.btnOk {
  margin-left: 50px;
}
</style>